<template>
    <div class="pay-center">
        <div class="pay-price">
            <span class="price-title">支付金额</span>
            <div class="price">
                <span>￥</span>
                <span>{{productMsg.price * productMsg.number}}</span>
            </div>
        </div>
        <div class="product-msg">
            <span>商品名：{{productMsg.name}}</span>
            <span>规格：{{productMsg.status}} 总价：{{productMsg.price}}元/件*{{productMsg.number}}件</span>
        </div>
        <div class="payment-method">
            <div class="method-box">
                <img src="~assets/icons/wechat.png" alt="">
                <div class="method-detail">
                    <span>微信支付</span>
                    <span>使用微信安全支付</span>
                </div>
            </div>
            <div class="choose-btn">
                <mt-checklist v-model="payMethod"  :options='options' @change='checkedProduct($event)'></mt-checklist>
            </div>
        </div>
        <div class="pay-btn">
            <span>立即支付</span>
        </div>
    </div>
</template>

<script>
import { Checklist } from 'mint-ui';

export default {
    name:'pay',
    data(){
        return {
            payMethod:[],
            options:[
                {
                    label: 'wechat',
                    value: 'wechat',
                },
            ],
            productMsg:{}
        }
    },
    methods:{
        checkedProduct(ev){
            console.log(ev);
        }
    },
    mounted(){
        this.$store.state.tab = '收银台';
        console.log(this.payMethod);
        this.productMsg = this.$route.params.msg;
        console.log(this.productMsg);
    },
    activated(){
        this.$store.state.tab = '收银台';
    },
    components:{
        Checklist
    }
}
</script>

<style lang='less'>
@rem:100rem;

.pay-center{
    width: 750/@rem;
    margin-top: 88/@rem;
    .mint-checkbox-label{
        display: none;
    }
    .pay-price{
        height: 300/@rem;
        width: 100%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        background: #ffffff;
        .price-title{
            font-size: 32/@rem;
            color: #868686;
        }
        .price{
            margin-top: 45/@rem;
            span:nth-of-type(1){
                font-size: 32/@rem;
                color: #646464;
                
            }
            span:nth-of-type(2){
                font-size: 80/@rem;
                color: #646464;
                vertical-align: baseline;
            }
        }
    }
    .product-msg{
        width: 100%;
        display: flex;
        flex-direction: column;
        background: #ffffff;
        padding-bottom: 20/@rem;
        color: #868686;
        span{
            margin-top: 6/@rem;
        }
    }
    .payment-method{
        width: 100%;
        height: 130/@rem;
        background: #ffffff;
        margin-top: 20/@rem;
        display: flex;
        align-items: center;
        justify-content: space-between;
        .method-box{
            display: flex;
            img{
                height: 70/@rem;
                width: 70/@rem;
                margin-left: 20/@rem;
            }
            .method-detail{
                margin-left: 24/@rem;
                display: flex;
                flex-direction: column;
                align-items: flex-start;
                font-size: 24/@rem;
                    span:nth-of-type(1){
                        color: #333333;
                    }
                    span:nth-of-type(2){
                        margin-top: 10/@rem;
                        color: #868686;
                    }
                }
        }
        
        .choose-btn{
            margin-left: 120/@rem;
        }
    }
    .pay-btn{
        margin: 0 auto;
        margin-top: 100/@rem;
        width: 710/@rem;
        height: 88/@rem;
        background-color: #6699ff;
        border-radius: 4/@rem;
        line-height: 88/@rem;
        span{
            font-size: 30/@rem;
            color: #ffffff;
        }
    }
    .pay-btn:active{
        background: #4884fc;
    }
}
</style>
